<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 5. -->
<input type="text">

<body>
    <script>
        // 1.js call()和apply()的区别
        // 都可以传参，但是 apply 是数组，而call 是参数列表，且 apply 和 call 是⼀次性传入参数
        //call 的第一个参数就是要修改的函数内部的this指向的对象 其他参数以散落的形式传递给函数
        //apply 的第一个参数就是要修改的函数内部的this指向的对象  其他参数以数组的形式传递给函数 


        // 2.什么是事件冒泡？什么是事件捕获？
        // DOM 事件两种类型
        // 事件类型分两种：事件捕获、事件冒泡。
        // 事件捕获就是由外往内，从事件发生的顶点开始，逐级往下查找，一直到目标元素。
        // 事件冒泡就是由内往外，从具体的目标节点元素触发，逐级向上传递，直到根节点


        // 3.js中的this指向
        // this指向一般来说不会在定义时确定this指向，而是在谁调用了函数，那函数中的this指向谁
        // 在普通函数中 this 指向 window
        // 构造函数中 this 指向的是实例化出来的对象。
        // 在 class 中 this 指向的是实例化出来的对象。
        // 在箭头函数中，this 和 声明箭头函数的作用域this保持一致
        // 在对象中的函数this指向，谁调用指向谁
        // 在 setTimeout 指向 window

        // 4.get和post有什么区别?
        // get是从服务器上获取数据,post是向服务器传送数据
        // post比get安全，因为数据在地址栏上不可见
        // get方式提交的数据最多只能有1024个字节，而post没有此限制
        // get使用URL或cookie传参，而post将数据放在request Body中
        // get和post都有自己的语义，不能随便混用



        // 5.如何防抖?
        // 防抖:在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
        let input = document.querySelector('input');
        //用来控制事件的触发
        let time = null;
        input.addEventListener('input', function () {
            // 防抖
            if (time != null) {
                // 清除
                clearTimeout(time)
            }
            time = setTimeout(() => {
                // this指向input
                console.log(this.value);
            }, 500)
        })




        // 6.http请求头中常见的content-type种类有哪些？
        // application/x-www-form-urlencoded最常见的 POST 提交数据的方式了
        // text开头
        // text / html： HTML格式
        // text / plain：纯文本格式
        // text / xml： XML格式
        // application开头
        // application / xhtml + xml：XHTML 格式
        // application / xml：XML 数据格式
        // application / atom + xml：Atom XML 聚合格式
        // application / json：JSON 数据格式
        // application / pdf：pdf 格式
        // application / msword：Word 文档格式
        // 媒体文件
        // audio / x - wav：wav文件
        // audio / x - ms - wma：w文件
        // audio / mp3：mp3文件
        // video / x - ms - wmv：wmv文件
        // video / mpeg4：mp4文件

        // 7.描述vue模板编译原理
        // vue提供了模板语法，允许我们声明式地描述状态和DOM之间的绑定关系，比如 < p > {{ name }}<p>。
        // 模板编译指的是模板将编译成render函数的过程，渲染函数的作用是每次执行时，会根据最新状态生成新的vnode。
        // 编译的过程是：模板作为输入 -> 模板编译 阶段->生成 渲染函数


        // 8.hash路由和history路由原理？
        // hash路由是利用hash值实现界面切换.
        // hash值是url地址#号后面的内容, 可以作为页面的锚点，实现一个页面不同锚点之间的跳转.
        // history路由是利用history对象putState方法或replaceState方法存储页面路径完成切换
        // history对象是浏览器历史记录对象


        // 9.vue中watch/computed的区别？
        // computed：计算属性，计算结果会缓存，只有当依赖值发生改变时才会重新计算，不支持异步
        // computed中的函数必须调用return
        // watch：监听属性，监听data中的数据变化，支持异步操作
        // 使用场景:
        // computed：获取state状态的时候把它放到computed中，写购物车计算数量也会使用计算属性
        // watch：封装编辑和新增弹窗组件会通过watch来进行id判断是否要清空表单数据，还有搜索数据



        // 10.Vue组件通信方式？
        // 父传子：在父组件中给子组件标签上一定义一个自定义属性，在子组件通过props来接收
        // 子传父：在父组件中给子组件标签上一定义一个自定义事件，在子组件通过this.$emit去调用（自定义事件名，传递的变量）
        // 兄弟组件：
        // 利用中央事件总线eventbus，在main.js中把一个空的vue实例挂载在vue的原型上起名叫$bus,传数据的时候
        // 用this.$bus.$emit,接受数据在created钩子函数中用$on来接收
        // vuex：利用vuex把公共的数据存在vuex中，就可以组件通信
        // v-model：也能实现，因为v-model就是:value和@input事件的合写



        // 11.关于webpack是否写过Loader和Plugin？
        // 编写一个Loader 思路：
        // loader是一个函数，对匹配到的内容进行转换，将转换内容返回
        // module.exports=function(source){
        //     return source.replace('a','b')
        // }
        // // 在webpack.config.js使用自己写的loader
        // module.exports={
        //     module:{
        //         rules:[{
        //             test:'/\.js$/',
        //             use:[{
        //                 loader:path.resolve(__dirname, './loader/replaceLoader.js'),
        //                 options:{
        //                     name:'--'
        //                 }
        //             }]
        //         }]
        //     }
        // }
        //
        // 编写一个 plugin
        // 思路：plugins 是一个类，webpack 为 plugin 提供了很多内置的 api，
        // 需要在原型上定义 apply(compliers) 函数。同时指定要挂载的 webpack 钩子。
        // class MyPlugin {
        //     constructor(params) {
        //         console.log(params)
        //     }
        //     // webpack 初始化参数后会调用这个引用函数，闯入初始化的 complier对象。
        //     apply(complier) {
        //         // 绑定钩子事件
        //         compiler.plugin('emit', compilation => {
        //             console.log('MyPlugin')
        //         })
        //     }
        // }
        // module.export = MyPlugin



        // 12.有哪些常见的webpack loader？解决什么问题的？
        // loader是webpack核心，用于对模块的源代码进行转换，支持链式调用
        // 常见的loader：
        // css-loader:分析css模块之间的关系，并合成一个css
        // style-loader:把css-loader生成的内容，用style标签挂载到页面的head中
        // less-loader:处理less
        // sass-loader:处理sass
        // postcss - loader: 用postcss来处理CSS
        // autoprefixer - loader: 处理CSS3属性前缀，已被弃用，建议直接使用postcss
        // file - loader: 分发文件到output目录并返回相对路径
        // url - loader: 和file - loader类似，但是当文件小于设定的limit时可以返回一个Data Url
        // html - minify - loader: 压缩HTML
        // babel - loader : 用babel来转换ES6文件到ES
    </script>
</body>

</html>